<template>
  <MainContent title="短信管理">
    <template #search-bar>
      <SearchBar inline>
        <template #normal>
          <el-form-item label="模板名称">
            <el-input v-model="tableForm.name" clearable placeholder="请输入模板名称"></el-input>
          </el-form-item>
          <el-form-item label="模板内容">
            <el-input v-model="tableForm.content" clearable placeholder="请输入搜索关键词"></el-input>
          </el-form-item>
          <!--          <ins-cascader-filter @change="(value) => tableForm.queryInsIds = value"></ins-cascader-filter>-->
        </template>
        <template #toolbar>
          <el-form-item>
            <!-- <el-button @click="resetForm">重置</el-button>-->
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="primary" @click="isAdd = true" v-has="['03030101']">新建短信模板</el-button>
          </el-form-item>
        </template>
      </SearchBar>
    </template>
    <div>
      <!--      <div class="mb-10">-->
      <!--        <el-button type="primary" @click="isAdd = true">新建短信模板</el-button>-->
      <!--      </div>-->
      <LayoutTable ref="tableList" url="/reach/reachSmsTemplateEntity/pageList" disable-auto-height :param="tableForm">
        <el-table-column prop="reachId" label="模板ID" min-width="100"></el-table-column>
        <el-table-column prop="name" label="模板名称" min-width="150"></el-table-column>

        <el-table-column prop="content" label="模板内容" width="250"></el-table-column>
        <el-table-column prop="smsSign" label="签名" min-width="150"></el-table-column>

        <el-table-column prop="smsType" label="模板类型" min-width="100">
          <template #default="scope">
            <div>
              {{ scope.row.smsType }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="name"
          label="字数"
          min-width="150"
        ></el-table-column>
         <el-table-column
          prop="name"
          label="审核状态"
          min-width="150"
        ></el-table-column> -->
        <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip></el-table-column>

        <el-table-column prop="createTime" label="创建时间" min-width="150">
          <template #default="scope">
            <div>
              {{ $filters.dateFormat(scope.row.createTime) }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="name"
          label="创建人"
          min-width="150"
        ></el-table-column> -->
        <el-table-column label="操作" width="150" fixed="right" v-has="['03030103', '03030102', '03030104']">
          <template #default="scope">
            <div>
              <el-button link type="primary" @click="toEditor(scope.row)" v-has="['03030102']">
                详情
              </el-button>
              <el-button link type="primary" @click="copy(scope.row)" v-has="['03030104']"> 复制 </el-button>
              <el-button link type="primary" @click="del(scope.row)" v-has="['03030103']">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </LayoutTable>
      <add @confirmAdd="confirmAdd" @cancelAdd="cancelAdd" :addData="addData" :isAdd="isAdd" :isDetail="isDetail"></add>
    </div>
  </MainContent>
</template>
<script>
import reachPipelineApi from "@/api/reachPipelineApi";
import add from "./add.vue";
import store from "@/store";
export default {
  name: 'SmsManagement',
  components: { add },
  data() {
    return {
      url: "",
      isAdd: false,
      isDetail: false,
      typeFilters: {},
      addData: { id: null },
      tableForm: {
        name: "",
        content: "",
        queryInsIds: [],
      },
    };
  },
  watch: {
    insId: {
      handler(val) {
        this.onSearch();
      },
      deep: true
    },
  },
  methods: {
    toEditor(row) {
      this.isAdd = true;
      this.isDetail = true;
      this.addData = JSON.parse(JSON.stringify(row));
    },
    copy(row) {
      this.isAdd = true;
      let params = JSON.parse(JSON.stringify(row));
      params.id = null;
      this.addData = params;
    },
    confirmAdd() {
      this.onSearch();
      this.cancelAdd();
    },
    cancelAdd() {
      this.isAdd = false;
      this.isDetail = false;
      this.addData = { id: null };
    },
    async delSmsTemplate(row) {
      let rs = await reachPipelineApi.delSmsTemplate({ id: row.id, name: row.name });
      if (rs.code === 200) {
        ElMessage.success("删除成功");
        this.onSearch();
      }
    },
    onSearch() {
      this.$nextTick(() => {
        this.$refs.tableList.search();
      });
    },

    del(row) {
      ElMessageBox.confirm("此操作将删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delSmsTemplate(row);
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    resetForm() {
      this.tableForm = {
        name: "",
        content: "",
      };
      this.onSearch();
    },
  },
  computed: {
    insId() {
      return store.state.insId.insId;
    },
  }
};
</script>
<style lang="scss" scoped></style>
